<template>
  <div class="table-manage">
    <el-card>
      <div class="card-header">
        <h2>桌号管理</h2>
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>新增桌号
        </el-button>
      </div>

      <!-- 桌号列表 -->
      <div class="table-list">
        <div v-if="tableList.length === 0" class="empty提示">
          <p>暂无桌号数据，请点击"新增桌号"按钮添加</p>
        </div>
        <div v-for="table in tableList" :key="table.id" class="table-item">
          <!-- 桌号信息（新增明确的桌号标签） -->
          <div class="table-info">
            <span class="table-number">{{ table.tableNumber }}</span>
            <el-button
                type="danger"
                size="small"
                @click="handleDelete(table.id)"
            >
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </div>
          <!-- 二维码展示 -->
          <el-image
              :src="table.qrCodeUrl"
              :preview-src-list="[table.qrCodeUrl]"
              class="qr-code"
          />
<!--          <div class="qr-code-table-number">{{ table.tableNumber }}</div>-->
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addTable, deleteTable, getAllTables } from '../api/table';
import { Plus, Delete } from '@element-plus/icons-vue';

import { watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
watch(() => route.path, () => {
  loadTableList();
});

const tableList = ref([]);

// 加载桌号列表
const loadTableList = async () => {
  try {
    const response = await getAllTables();
    if (response.code === 200 || response.success) {
      tableList.value = response.data;
    } else {
      ElMessage.error('获取桌号列表失败');
    }
  } catch (error) {
    console.error('加载桌号失败:', error);
    ElMessage.error('获取桌号列表失败');
  }
};

// 新增桌号
const handleAdd = async () => {
  try {
    const response = await addTable();
    if (response.code === 200) {
      ElMessage.success('新增桌号成功');
      loadTableList(); // 刷新列表
    } else {
      ElMessage.error(response.msg || '新增失败');
    }
  } catch (error) {
    console.error('新增桌号失败:', error);
    ElMessage.error('新增桌号失败');
  }
};

// 删除桌号
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除该桌号吗？', '删除确认', {
      type: 'warning'
    });

    const response = await deleteTable(id);
    if (response.code === 200) {
      ElMessage.success('删除成功');
      loadTableList(); // 刷新列表
    } else {
      ElMessage.error(response.msg || '删除失败');
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error);
      ElMessage.error('删除操作失败');
    }
  }
};

// 页面初始化加载
onMounted(() => {
  loadTableList();
});
</script>

<style scoped>
.table-manage {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.table-item {
  width: 200px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.table-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.table-number {
  font-size: 16px;
  font-weight: bold;
}

.qr-code {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.qr-code-container {
  text-align: center;
}

.qr-code-table-number {
  margin-top: 8px;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
</style>